  <template>
      <div class="edit-popup box-flex">
          <div style="flex: 1">
              <el-card class="!border-none" shadow="never">
                  <el-button v-perms="['thread:add/edit']" type="primary" :disabled="disabled">
                      <template #icon>
                          <icon name="local-icon-qiehuan" />
                      </template>
                      转移给其他人 </el-button
                  ><el-button v-perms="['thread:add/edit']" type="primary" :disabled="disabled">
                      <template #icon>
                          <icon name="local-icon-huiche" />
                      </template>
                      转成客户 </el-button
                  ><el-button v-perms="['thread:add/edit']" type="primary" :disabled="disabled">
                      <template #icon>
                          <icon name="local-icon-qiehuan" />
                      </template>
                      转入线索池
                  </el-button>
              </el-card>
              <el-card class="mt-2 !border-none" shadow="never">
                  <el-form
                      ref="formRef"
                      :model="formData"
                      label-width="200px"
                      :rules="formRules"
                      :inline="true"
                      class="formEdit"
                      :disabled="disabled"
                  >
                      <el-collapse v-model="activeNames">
                          <el-collapse-item title="客户信息" name="1">
                              <el-form-item label="公司名称" prop="customerName">
                                  <el-input
                                      style="width: 310px"
                                      v-model="formData.customerName"
                                      placeholder="请输入客户名称"
                                  />
                                  <el-button type="primary" style="margin-left: 20px"> 查看 </el-button>
                              </el-form-item>
                              <el-form-item label="联系人" prop="name">
                                  <el-input v-model="formData.name" placeholder="请输入联系人" />
                              </el-form-item>
                              <el-form-item label="职务" prop="post">
                                  <el-select
                                      class="flex-1"
                                      v-model="formData.post"
                                      placeholder="请选择职务"
                                  >
                                      <el-option label="职务" value="1" />
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="联系人电话" prop="phone">
                                  <el-input v-model="formData.phone" placeholder="请输入联系人电话" />
                              </el-form-item>
                              <el-form-item label="微信号码" prop="wechatNo">
                                  <el-input
                                      v-model="formData.wechatNo"
                                      placeholder="请输入微信号码"
                                  />
                              </el-form-item>
                              <!-- <el-form-item label="部门名称" prop="deptName">
                <el-input
                  v-model="formData.deptName"
                  placeholder="请输入部门名称"
                />
              </el-form-item> -->
                              <el-form-item label="咨询业务" prop="deptName">
                                  <el-select
                                      class="flex-1"
                                      v-model="formData.caseSourceType"
                                      placeholder="请选择咨询业务"
                                  >
                                      <el-option label="产品1" value="1" />
                                      <el-option label="产品2" value="2" />
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="客户来源" prop="leadSource">
                                  <el-select
                                      class="flex-1"
                                      v-model="formData.systemCustomerId"
                                      placeholder="请选择客户来源"
                                  >
                                      <el-option label="某某交流会" value="0" />
                                      <el-option label="客户名称0426" value="1" />
                                      <el-option label="2023代理人交流会" value="2" />
                                      <el-option label="专利年会" value="3" />
                                      <el-option label="测试测试" value="4" />
                                      <el-option label="0401" value="5" />
                                      <el-option label="0412" value="6" />
                                      <el-option label="交流会" value="6" />
                                      <el-option label="唯德上海交流会" value="7" />
                                      <el-option label="线上论坛" value="8" />
                                      <el-option label="举办活动" value="9" />
                                      <el-option label="微信分享" value="10" />
                                      <el-option label="直播营销" value="11" />
                                      <el-option label="上门拜访" value="12" />
                                      <el-option label="参加展览" value="13" />
                                      <el-option label="微博营销" value="14" />
                                      <el-option label="搜索式营销" value="15" />
                                      <el-option label="线上教学" value="16" />
                                      <el-option label="其他" value="17" />
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="公司地址" prop="address">
                                  <el-input v-model="formData.address" placeholder="请输入地址" />
                              </el-form-item>
                              <el-form-item label="线上留言情况（备注）" prop="httpUrl">
                                  <el-input
                                      v-model="formData.httpUrl"
                                      type="textarea"
                                      placeholder="请输入备注"
                                  />
                              </el-form-item>
                          </el-collapse-item>
                          <!-- <el-collapse-item title="联系信息" name="2">
                          <el-form-item label="姓名" prop="name">
                              <el-input v-model="formData.name" placeholder="请输入姓名" />
                          </el-form-item>
                          <el-form-item label="职务" prop="post">
                              <el-select class="flex-1" v-model="formData.post" placeholder="请选择职务">
                                  <el-option label="职务" value="1" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="手机号码" prop="phone">
                              <el-input style="width: 330px" v-model="formData.phone" placeholder="请输入手机号码" /><el-button
                                  type="primary"> 查看 </el-button>
                          </el-form-item>
                          <el-form-item label="座机号码" prop="number">
                              <el-input v-model="formData.number" placeholder="请输入电话" />
                          </el-form-item>
                          <el-form-item label="微信号码" prop="wechatNo">
                              <el-input v-model="formData.wechatNo" placeholder="请输入微信号码" />
                          </el-form-item>
                          <el-form-item label="qq" prop="qq">
                              <el-input v-model="formData.qq" placeholder="请输入qq" />
                          </el-form-item>
                          <el-form-item label="邮箱" prop="email">
                              <el-input v-model="formData.email" placeholder="请输入邮箱" />
                          </el-form-item>

                          <el-form-item label="邮编" prop="postcode">
                <el-input v-model="formData.postcode" placeholder="请输入邮编" />
              </el-form-item>
                      </el-collapse-item> -->
                          <el-collapse-item title="业务动态" name="3">
                              <el-form-item label="重点产业" prop="keyIndustry">
                                  <el-input
                                      v-model="formData.keyIndustry"
                                      placeholder="请输入重点产业"
                                  />
                              </el-form-item>
                              <el-form-item
                                  label="知识产权布局地区"
                                  prop="intellectualPropertyAddress"
                              >
                                  <el-input
                                      v-model="formData.intellectualPropertyAddress"
                                      placeholder="请输入知识产权布局地区"
                                  />
                              </el-form-item>
                              <el-form-item label="知识产权动态" prop="intellectualPropertyNumber">
                                  <el-input
                                      v-model="formData.intellectualPropertyNumber"
                                      placeholder="请输入知识产权动态"
                                  />
                              </el-form-item>
                              <el-form-item label="标准参标情况" prop="country">
                                  <el-input
                                      v-model="formData.country"
                                      placeholder="请输入标准参标情况"
                                  />
                              </el-form-item>
                              <el-form-item label="数字化动态" prop="province">
                                  <el-input
                                      v-model="formData.province"
                                      placeholder="请输入数字化动态"
                                  />
                              </el-form-item>
                              <el-form-item label="人力资源动态" prop="city">
                                  <el-input
                                      v-model="formData.city"
                                      placeholder="请输入人力资源动态"
                                  />
                              </el-form-item>
                              <el-form-item label="项目体系动态" prop="administrativeDivision">
                                  <el-input
                                      v-model="formData.administrativeDivision"
                                      placeholder="请输入项目体系动态"
                                  />
                              </el-form-item>
                              <el-form-item label="产学研建设情况" prop="province">
                                  <el-input
                                      v-model="formData.province"
                                      placeholder="请输入产学研建设情况"
                                  />
                              </el-form-item>
                              <el-form-item label="违规违法行为及失信情况" prop="city">
                                  <el-input
                                      v-model="formData.city"
                                      placeholder="请输入违规违法行为及失信情况"
                                  />
                              </el-form-item>
                          </el-collapse-item>

                          <!-- <el-collapse-item title="案源信息" name="4"
              ><el-form-item label="内部案源人" prop="internalCaseSource">
                <el-input
                  v-model="formData.internalCaseSource"
                  placeholder="请输入内部案源人"
                />
              </el-form-item>
              <el-form-item label="内部案源人电话" prop="internalCaseSourcePhone">
                <el-input
                  v-model="formData.internalCaseSourcePhone"
                  placeholder="请输入内部案源人电话"
                />
              </el-form-item>
              <el-form-item label="内部案源人邮箱" prop="internalCaseSourceEmail">
                <el-input
                  v-model="formData.internalCaseSourceEmail"
                  placeholder="请输入内部案源人邮箱"
                />
              </el-form-item>
              <el-form-item label="外部案源人" prop="externalCaseSource">
                <el-input
                  v-model="formData.externalCaseSource"
                  placeholder="请输入外部案源人"
                />
              </el-form-item>
              <el-form-item label="外部案源人电话" prop="externalCaseSourcePhone">
                <el-input
                  v-model="formData.externalCaseSourcePhone"
                  placeholder="请输入外部案源人电话"
                />
              </el-form-item>
              <el-form-item label="外部案源人邮箱" prop="externalCaseSourceEmail">
                <el-input
                  v-model="formData.externalCaseSourceEmail"
                  placeholder="请输入外部案源人邮箱"
                />
              </el-form-item>
              <el-form-item label="案源类型" prop="caseSourceType">
                <el-select
                  class="flex-1"
                  v-model="formData.caseSourceType"
                  placeholder="请选择案源类型"
                >
                  <el-option label="类型" value="1" />
                </el-select>
              </el-form-item>
            </el-collapse-item> -->
                          <!-- <el-collapse-item title="地址信息" name="5">

              </el-collapse-item> -->
                          <el-collapse-item title="人员信息" name="6">
                              <el-form-item label="主归属公司" prop="mainCompanyId">
                                  <el-input
                                      v-model="formData.mainCompanyId"
                                      placeholder="请输入主归属公司"
                                  />
                              </el-form-item>
                              <el-form-item label="副归属公司" prop="subsidiaryCompanyId">
                                  <el-input
                                      v-model="formData.subsidiaryCompanyId"
                                      placeholder="请输入副归属公司"
                                  />
                              </el-form-item>
                              <el-form-item label="业务人员" prop="post">
                                  <el-select
                                      class="flex-1"
                                      v-model="formData.post"
                                      placeholder="请选择业务人员"
                                  >
                                      <el-option label="职务" value="1" />
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="业务人员电话" prop="phone">
                                  <el-input
                                      disabled
                                      v-model="formData.phone"
                                      placeholder="请输入业务人员电话"
                                  />
                              </el-form-item>
                              <el-form-item label="项目协助人员" prop="leadSource">
                                  <el-select
                                      class="flex-1"
                                      v-model="formData.leadSource"
                                      placeholder="请选择项目协助人员"
                                  >
                                      <el-option label="流程1" value="0" />
                                      <el-option label="销售1" value="1" />
                                  </el-select>
                              </el-form-item>
                              <el-form-item label="项目协助人员电话" prop="remark">
                                  <el-input
                                      disabled
                                      v-model="formData.remark"
                                      placeholder="请输入项目协助人员电话"
                                  />
                              </el-form-item>
                          </el-collapse-item>

                          <!-- <el-collapse-item name="7">

                          <el-form-item label="初次见面日期" prop="firstMeetingsTime">
                              <el-date-picker class="flex-1 !flex" v-model="formData.firstMeetingsTime" type="datetime"
                                  clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择初次见面日期" />
                          </el-form-item>

                          <el-form-item label="预计销售金额" prop="estimatedSalesAmount">
                              <el-input-number v-model="formData.estimatedSalesAmount" :max="9999" :precision="2"
                                  :step="0.1" />
                          </el-form-item>
                          <el-form-item label="预计签单日期" prop="expectedOrderTime">
                              <el-date-picker class="flex-1 !flex" v-model="formData.expectedOrderTime" type="datetime"
                                  clearable value-format="YYYY-MM-DD hh:mm:ss" placeholder="请选择预计签单日期" />
                          </el-form-item>

                      </el-collapse-item> -->
                          <!-- <el-collapse-item title="人员信息" name="8">
                          <el-form-item label="业务人员" prop="businessPersonnelId">
                              <el-select class="flex-1" v-model="formData.businessPersonnelId" placeholder="请选择业务人员">
                                  <el-option label="张三" value="1" />
                                  <el-option label="李四" value="2" />
                                  <el-option label="王五" value="3" />
                              </el-select>
                          </el-form-item>
                          <el-form-item label="协作人" prop="collaboratorId">
                              <el-select class="flex-1" v-model="formData.collaboratorId" placeholder="请选择协作人">
                                  <el-option label="张三" value="1" />
                                  <el-option label="李四" value="2" />
                                  <el-option label="王五" value="3" />
                              </el-select>
                          </el-form-item>
                      </el-collapse-item> -->
                          <el-collapse-item title="系统信息" name="9">
                              <el-form-item label="创建人" prop="userName">
                                  <el-input disabled v-model="formData.userName" /> </el-form-item
                              ><el-form-item label="创建时间" prop="createTime">
                                  <el-input disabled v-model="formData.createTime" /> </el-form-item
                              ><el-form-item label="更新时间" prop="updateTime">
                                  <el-input disabled v-model="formData.updateTime" /> </el-form-item
                          ></el-collapse-item>
                      </el-collapse>
                  </el-form>
              </el-card>
          </div>
          <div style="width: 30%;margin-left: 20px">
              <div style="display: flex; justify-content: space-between; align-items: center">
                  <span style="font-weight: bold; color: #89171d; font-size: 18px"> 跟踪信息</span>
                  <el-button
                      type="primary"
                      style="margin: 10px"
                      :icon="Plus"
                      @click="WriteFollowup = true"
                  >
                      写跟进
                  </el-button>
              </div>
              <el-form
                  ref="formRef"
                  :model="formData"
                  :rules="formRules"
                  label-width="70px"
                  :disabled="disabled"
                  style="padding-right: 10px"
              >
                  <el-form-item label="跟进名称" prop="intendedBusiness">
                      <el-input v-model="formData.intendedBusiness" placeholder="请输入跟进名称" />
                  </el-form-item>
                  <el-form-item label="跟进方式" prop="followUpStatus">
                      <el-select
                          v-model="formData.followUpStatus"
                          class="flex-1"
                          placeholder="请选择跟进方式"
                      >
                          <el-option label="电话联系" value="1" />
                          <el-option label="微信短信" value="2" />
                          <el-option label="电子邮件" value="3" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="跟进时间" prop="contractState">
                      <daterange-picker
                          v-model:startTime="formData.contractStartTimeStart"
                          v-model:endTime="formData.contractStartTimeEnd"
                      />
                  </el-form-item>
              </el-form>
              <div class="flex flex-wrap gap-4">
                  <el-card v-for="i in 2" :key="i" style="width: 98%">
                      <el-tag type="danger">2024-01-2 17:00:12</el-tag>
                      <div style="display: flex; align-items: center; padding: 10px 0px">
                          <span class="el-avatar el-avatar--circle" style="--el-avatar-size: 34px"
                              ><img
                                  src="http://127.0.0.1:8082/api/static/backend_avatar.png"
                                  style="object-fit: cover"
                          /></span>

                          <span style="font-weight: bold; padding: 0px 10px"> 流程01 ▶</span
                          ><span>7个月前</span>
                      </div>
                      <div>从客户公海池抢到</div>
                  </el-card>
              </div>
          </div>
          <el-dialog title="添加跟进状态" v-model="WriteFollowup" width="1050px">
              <el-form :inline="true" label-width="150px">
                  <el-form-item label="跟进方式" prop="followUpStatus">
                      <el-select
                          v-model="formData.followUpStatus"
                          class="flex-1 w-[300px]"
                          placeholder="请选择跟进方式"
                      >
                          <el-option label="电话联系" value="1" />
                          <el-option label="微信短信" value="2" />
                          <el-option label="电子邮件" value="3" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="跟进时间" prop="contractState">
                      <daterange-picker
                          style="width: 300px"
                          v-model:startTime="formData.contractStartTimeStart"
                          v-model:endTime="formData.contractStartTimeEnd"
                      />
                  </el-form-item>
                  <el-form-item label="跟进状态" prop="followUpStatus">
                      <el-select
                          v-model="formData.followUpStatus"
                          class="flex-1 w-[300px]"
                          placeholder="请选择跟进状态"
                      >
                          <el-option label="维持中" value="1" />
                          <el-option label="已完成" value="2" />
                          <el-option label="已取消" value="3" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="联系人" prop="collaborator">
                      <el-select v-model="formData.name" class="flex-1 w-[300px]" clearable>
                          <el-option label="流程01" value="1" />
                          <el-option label="流程02" value="2" />
                          <el-option label="流程03" value="3" />
                      </el-select>
                  </el-form-item>
                  <el-form-item label="联系方式" prop="formerBusinessPersonnelName">
                      <el-input class="w-[300px]" v-model="formData.formerBusinessPersonnelName" />
                  </el-form-item>
                  <el-form-item label="跟进内容" prop="formerBusinessPersonnelName">
                      <el-input class="w-[300px]" type="textarea" v-model="formData.formerBusinessPersonnelName" />
                  </el-form-item>
                  <el-form-item prop="caseType">
                      <el-checkbox style="margin-left: 80px" class="w-[300px]" label="是否同步创建商机" value="1"></el-checkbox>
                  </el-form-item>
              </el-form>
              <template #footer>
                  <div class="dialog-footer">
                      <el-button @click="WriteFollowup = false">取消</el-button>
                      <el-button type="primary" @click="WriteFollowup = false"> 确认 </el-button>
                  </div>
              </template>
          </el-dialog>
          <footer-btns>
              <el-button type="primary" @click="handleSubmit">保存</el-button>
          </footer-btns>
      </div>
  </template>
  <script lang="ts" setup>
  import type { FormInstance } from 'element-plus'
  import feedback from '@/utils/feedback'
  import { useDictOptions } from '@/hooks/useDictOptions'
  import { threadEdit, threadAdd, threadDetail } from '@/api/thread'
  import useMultipleTabs from '@/hooks/useMultipleTabs'
  import Popup from '@/components/popup/index.vue'
  import { Plus } from '@element-plus/icons-vue'

  const emit = defineEmits(['success', 'close'])
  const activeNames = ['1', '2', '3', '4', '5', '6', '7', '8', '9']
  const route = useRoute()
  const router = useRouter()
  const formData = reactive({
      id: '',
      customerName: '',
      deptName: '',
      httpUrl: '',
      name: '',
      post: '',
      phone: '',
      number: '',
      wechatNo: '',
      qq: '',
      email: '',
      address: '',
      postcode: '',
      keyIndustry: '',
      contractStartTimeStart: '',
      contractStartTimeEnd: '',
      intellectualPropertyAddress: '',
      intellectualPropertyNumber: '',
      internalCaseSource: '',
      internalCaseSourcePhone: '',
      internalCaseSourceEmail: '',
      externalCaseSource: '',
      externalCaseSourcePhone: '',
      externalCaseSourceEmail: '',
      systemCustomerId: '',
      caseSourceType: '',
      country: '',
      province: '',
      city: '',
      administrativeDivision: '',
      mainCompanyId: '',
      subsidiaryCompanyId: '',
      leadSource: '',
      remark: '',
      firstMeetingsTime: '',
      followUpStatus: '',
      followUpNextTime: '',
      estimatedSalesAmount: 0,
      expectedOrderTime: '',
      intendedBusiness: '',
      businessPersonnelId: '',
      businessPersonnelName: '',
      collaboratorId: '',
      collaboratorName: '',
      formerBusinessPersonnelId: '',
      formerBusinessPersonnelName: '',
      type: '',
      userName: '',
      createTime: '',
      updateTime: ''
  })
  const WriteFollowup = ref(false)
  const formRules = {
      //   customerName: [
      //     {
      //       required: true,
      //       message: "请输入客户名称",
      //       trigger: ["blur"],
      //     },
      //   ],
      name: [
          {
              required: true,
              message: '请输入姓名',
              trigger: ['blur']
          }
      ],
      phone: [
          {
              required: true,
              message: '请输入联系人电话',
              trigger: ['blur']
          }
      ]
  }

  const { removeTab } = useMultipleTabs()
  const formRef = shallowRef<FormInstance>()
  const handleSubmit = async () => {
      await formRef.value?.validate()
      const data: any = { ...formData }
      if (route.query.id) {
          await threadEdit(data)
      } else {
          await threadAdd(data)
      }
      feedback.msgSuccess('操作成功')
      emit('success')
      removeTab()
      router.back()
  }

  const setFormData = async (data: Record<string, any>) => {
      for (const key in formData) {
          if (data[key] != null && data[key] != undefined) {
              //@ts-ignore
              formData[key] = data[key]
          }
      }
  }

  const getDetail = async () => {
      const data = await threadDetail({
          id: route.query.id
      })
      setFormData(data)
  }

  route.query.id && getDetail()

  const disabled = ref(false)

  const disabledAll = async () => {
      disabled.value = true
      getDetail()
  }

  route.query.type == 'check' && disabledAll()

  const handleClose = () => {
      emit('close')
  }
  </script>

  <style scoped>
  .formEdit .el-form-item {
      width: 590px;
  }

  ::v-deep .el-collapse-item__header {
    padding-left: 54px;
    background-color: var(--el-bg-color-collapse);
    font-size: 16px;
    font-weight: 600;
    color: var(--el-text-color-collapse);
  }

  ::v-deep .el-collapse-item__wrap {
      padding-top: 40px;
  }

  .box-flex {
      display: flex;
  }
  </style>
